<div class="phone" id="app">
    <!-- 導航列 -->
    <nav>
        <ul class="nav__tab">
            <li :class="{ active: !isShowingCart }"
                @click="toggleTab(false)">products</li>
            <li :class="{ active: isShowingCart }"
                @click="toggleTab(true)">shopping cart</li>
        </ul>
    </nav>

    <!-- 主要展示區塊 -->
    <main :class="{ shift: isShowingCart }">
        <!-- 瀏覽產品 -->
        <div class="content">
            <!-- 範例 HTML -->
            <div class="product" v-for="product in products">
                <div class="info-box">
                    <img :src="product.thumb" />
                    <div>
                        <h2>{{ product.name }}</h2>
                        <p>{{ product.price }}</p>
                    </div>
                </div>
                <div class="action-box">
                    <div>
                        <button class="round" @click="minusOne(product)">-</button>
                        <span>{{ product.amountShow }}</span>
                        <button class="round" @click="addOne(product)">+</button>
                    </div>
                    <button @click="addToCart(product)">add to cart</button>
                </div>

                <!-- 購物成功的 icon -->
                <div class="icon-container" :class="{ showing: product.showingIcon }">
                    <svg class="icon" viewBox="0 0 100 100" width="80" height="80">
                        <circle class="circle" cx="50" cy="50" r="48"></circle>
                        <polyline class="check" points="28,53 42,66 74,34"></polyline>
                    </svg>
                    <p>成功加入購物車</p>
                </div>
            </div>
        </div>

        <!-- 購物清單 -->
        <div class="content">
            <table>
                <thead>
                    <tr>
                        <th colspan="5">Order</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-title">
                        <td>品項</td>
                        <td>數量</td>
                        <td>單價</td>
                        <td>小計</td>
                        <td></td>
                    </tr>
                    <tr v-for="product in productsInCart">
                        <td>{{ product.name }}</td>
                        <td>{{ product.amount }}</td>
                        <td>{{ product.price }}</td>
                        <td>{{ product.sum }}</td>
                        <td>
                            <button class="button-del" @click="remove(product)">×</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td colspan="3">Total <span class="total-price">$ {{ total }}</span></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
            <button class="checkout">前往付款</button>
        </div>
    </main>
</div>
